<template>
    <div id="index">
        <dv-full-screen-container class="bg">
            <div class="dataweather">

                    <el-select v-model="orgName" placeholder="业主">
                        <el-option
                                v-for="item in orgList"
                                :key="item.id"
                                :label="item.label"
                                :value="item.value"
                        ></el-option>
                    </el-select>

            </div>
            <div class="datatime">
                <span>
                    {{dataTime.dateYear}} {{dataTime.dateWeek}} {{dataTime.dateDay}}
                </span>
            </div>
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">
                <top-header/>
                <div class="screen-body">
                    <section class="screen-left">
                        <div id="left-one" >
                            <dv-border-box-11 class="bg-color-black" style="height:100%;padding: .2rem;width: 100%" title="资产信息">

                                <!--  资产信息 -->
                                <LeftOne ref="leftOne"></LeftOne>

                            </dv-border-box-11>
                        </div>


                        <div id="left-two">
                            <!-- 缺陷等级占比，资产类型缺陷占比 -->
                            <dv-border-box-10 class="bg-color-black" style="height:100%;padding: .2rem;width: 100%">

                                <LeftTwo ref="leftTwo"></LeftTwo>
                            </dv-border-box-10>
                        </div>
                        <div id="left-three"  >
                            <!-- 缺陷故障统计 -->
                            <dv-border-box-10 class="bg-color-black" style="height:100%;padding: .2rem;width: 100%">

                                <LeftThree ref="leftThree"></LeftThree>
                            </dv-border-box-10>
                        </div>
                        <div id="left-four">
                            <!-- 缺陷故障明显 -->
                            <dv-border-box-8 class="bg-color-black" style="height:100%;padding: .2rem;width: 100%" title="资产信息">

                                <LeftFour ref="leftFour"></LeftFour>
                            </dv-border-box-8>
                        </div>
                    </section>
                    <section class="screen-middle">
                        <div id="middle-one"  >
                            <MiddleOne></MiddleOne>
                        </div>

                        <div id="middle-two"  >
                            <dv-border-box-12 class="bg-color-black" style="height:100%;padding: .2rem;width: 100%" >

                                <!-- 客户资产地图 -->
                               <MiddleTwo></MiddleTwo>
                            </dv-border-box-12>
                        </div>
                        <div id="middle-three" >
                            <dv-border-box-12 class="bg-color-black" style="height:100%;padding: .2rem;width: 100%" >

                                <!-- 月缺陷故障趋势 -->
                                <MiddleThree></MiddleThree>
                            </dv-border-box-12>
                        </div>
                    </section>
                    <section class="screen-right">
                        <div id="right-one">
                            <!--   运维服务公司-->
                            <dv-border-box-11 class="bg-color-black" style="height:100%;padding: .2rem;width: 100%" title="运维服务公司">

                                <RightOne ref="rightOne"></RightOne>
                            </dv-border-box-11>
                        </div>
                        <div id="right-two">
                            <!-- 任务分类，巡视完成率 -->
                            <dv-border-box-10 class="bg-color-black" style="height:100%;padding: .2rem;width: 100%">

                                <RightTwo ref="rightTwo"></RightTwo>
                            </dv-border-box-10>
                        </div>
                        <div id="right-three"  >
                            <!-- 运维质量排名 -->
                            <dv-border-box-10 class="bg-color-black" style="height:100%;padding: .2rem;width: 100%">

                                <RightThree ref="rightThree"></RightThree>
                            </dv-border-box-10>
                        </div>
                        <div id="right-four">
                            <!-- 任务明细 -->
                            <dv-border-box-8 class="bg-color-black" style="height:100%;padding: .2rem;width: 100%">

                                <RightFour ref="rightFour"></RightFour>
                            </dv-border-box-8>
                        </div>
                    </section>
                </div>
            </div>

        </dv-full-screen-container>
    </div>
</template>

<script>
    import {formatTime} from '../utils/index.js'
    import topHeader from "./topHeader"

    import LeftOne from '@/components/leftOne.vue'
    import LeftTwo from '@/components/leftTwo.vue'
    import LeftThree from '@/components/leftThree.vue'
    import LeftFour from '@/components/leftFour.vue'

    import RightOne from '@/components/rightOne.vue'
    import RightTwo from '@/components/rightTwo.vue'
    import RightThree from '@/components/rightThree.vue'
    import RightFour from '@/components/rightFour.vue'


    import MiddleOne from '@/components/middleOne.vue'
    import MiddleTwo from '@/components/middleTwo.vue'
    import MiddleThree from '@/components/middleThree.vue'
    import {weatherOption} from '../config/weatherOption'

    export default {
        name: "index",
        components: {
            topHeader,
            // topNumber,
            // centerForm,
            // leftLevel,
            // leftLoops,
            // china,
            // // chinaGaode,
            // rightProvince,
            // rightCounty,
            LeftOne,
            LeftTwo,
            LeftThree,
            LeftFour,
            RightOne,
            RightTwo,
            RightThree,
            RightFour,
            MiddleOne,
            MiddleTwo,
            MiddleThree,
        },
        data() {
            return {
                orgList:[{
                    id:1,
                    label:'2019',
                    value:'2019'
                },{
                    id:2,
                    label:'2020',
                    value:'2020'
                }],
                orgName:'',
                loading: true,
                dataTime: {
                    dateDay: null,
                    dateYear: null,
                    dateWeek: null,
                    weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
                },
                dataWeather: {
                    city: '北京市',
                    dayweather: '晴',
                    nightweather: '多云',
                    weathertemp: '晴', // 根据时间判断选白天还是晚上的天气
                    nighttemp: '3℃',
                    daytemp: '15℃',
                    peraturetemp: '3℃~15℃', // 根据时间判断选白天还是晚上的温度
                    icontemp: 'https://cdn.heweather.com/cond_icon/100.png',
                },
                areaData: {
                    areaCode: "000000",
                    areaLevel: "county",
                    name: "中国",
                    areaName: "中国",
                },
            };
        },
        computed: {
            chinaMapTitle() {
                let areaName = this.areaData.areaName;
                if (areaName === 'china') {
                    areaName = '全国'
                }
                return areaName;
            }
        },
        created() {
            this.getDateTime();
            this.cancelLoading();
            // this.requestGetWeather();
        },
        mounted() {

        },
        methods: {
            // 获取时间
            getDateTime() {
                setInterval(() => {
                    this.dataTime.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
                    this.dataTime.dateWeek = this.dataTime.weekday[new Date().getDay()];
                    this.dataTime.dateDay = formatTime(new Date(), 'HH: mm: ss');
                }, 1000)
            },
            // 获取天气
            requestGetWeather() {
                $.get({
                    //这里的url不能写到data对象的外面
                    url: 'https://api.asilu.com/weather_v2/',
                    dataType: 'jsonp',  // 请求方式为jsonp
                    success: (data) => {
                        if (data.status === '1') {
                            let currTime = new Date().getHours();
                            let dailyForecast = data.forecasts[0].casts[0];
                            let city = data.forecasts[0].city;
                            let daytemp = dailyForecast.daytemp + '℃';
                            let nighttemp = dailyForecast.nighttemp + '℃';
                            let weathertemp = '';
                            let peraturetemp = '';
                            if ((currTime >= 6) && (currTime < 18)) {
                                weathertemp = dailyForecast.dayweather;
                                peraturetemp = dailyForecast.nighttemp + "℃~" + dailyForecast.daytemp + "℃";
                            } else {
                                weathertemp = dailyForecast.nightweather;
                                peraturetemp = dailyForecast.daytemp + "℃~" + dailyForecast.nighttemp + "℃";
                            }
                            let icontemp = 'https://cdn.heweather.com/cond_icon/' + weatherOption.weatherCode[weathertemp] + '.png';
                            this.dataWeather = {city, daytemp, nighttemp, weathertemp, peraturetemp, icontemp}
                        }
                    }
                })
            },

            cancelLoading() {
                setTimeout(() => {
                    this.loading = false;
                }, 500);
            },
            mapClick(data) {
                this.areaData = data;
            },
            backClick(data) {
                this.areaData = data;
            },
        }
    };
</script>

<style lang="scss">
    @import '../assets/scss/index.scss';
</style>
<style lang="scss" scoped>

    #index {
        .dv-border-box-10, .dv-border-box-12, .dv-border-box-13, {
            height: inherit;
        }

        .dataweather {
            z-index: 999;
            position: absolute;
            top: .2rem;
            left: 1.1rem;
            font-size: .22rem;
            color: #fff;

            img {
                width: .3rem;
                height: .3rem;
                filter: brightness(3);
                vertical-align: bottom;
            }
        }

        .datatime {
            z-index: 999;
            position: absolute;
            top: .2rem;
            right: 1.1rem;
            font-size: .22rem;
            color: #fff;
        }

        .topNumber {
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center
        }

        .screen-body {
            width: 100%;
            height: 100%;
            display: flex;
            margin-top: 10px;
            .screen-left {
                height: 100%;
                width: 28%;
                #left-one {
                    height: 25%;
                    position: relative;
                }
                #left-two {
                    height: 15%;
                    margin-top: 5px;
                    position: relative;
                }
                #left-three {
                    height: 18%;
                    margin-top: 5px;
                    position: relative;
                }
                #left-four {
                    height: 20%;
                    margin-top: 5px;
                    position: relative;
                }
            }
            .screen-middle {
                height: 100%;
                width: 41.5%;
                margin-left: 1.6%;
                margin-right: 1.6%;
                #middle-one {
                    width: 100%;
                    height: 8%;
                    position: relative;
                }
                #middle-two {
                    margin-top: 10px;
                    width: 100%;
                    height: 40%;
                    position: relative;
                }
                #middle-three {
                    margin-top: 10px;
                    width: 100%;
                    height: 30%;
                    position: relative;
                }
            }
            .screen-right {
                height: 100%;
                width: 28%;

                #right-one {
                    height: 25%;
                    position: relative;
                }
                #right-two {
                    height: 15%;
                    margin-top: 5px;
                    position: relative;
                }
                #right-three {
                    height: 18%;
                    margin-top: 5px;
                    position: relative;
                }
                #right-four {
                    height: 20%;
                    margin-top: 5px;
                    position: relative;
                }
            }
        }
    }

</style>
